@import "../../../../assets/styles/variables";
.ss-platform-appicon {
  &-wraper, & {display: inline-block;text-align: center;position: relative;cursor: pointer}
  float: left;
  @include ssapp();
  i {
    float: left;font-size: 16px;width: 16px;height: 16px;line-height: 16px;box-sizing: border-box;
  }
  &.circle {
    i {border-radius: 100px}
  }
  &-property {
    padding: 10px 0;width: 300px;max-height:initial!important;
    .title {
      position: relative;border-bottom: 1px solid #ececec;margin: 10px;
      strong {
        position: absolute;bottom: -10px;left: 0;background: #fff;font-weight: 400;padding-right: 6px;color: #9f9f9f;font-size: 12px;
      }
    }
    .color {
      padding: 5px;
      li {
        float: left;width: 32px;height: 32px;line-height: 32px;text-align: center;list-style: none;
        span {
          display: block;border-radius: 30px;height: 24px;width: 24px;border: none !important;margin-top: 4px;margin-left: 4px;cursor: pointer;
        }
      }
    }
    .icons {
      padding: 5px;height: 200px;box-sizing: border-box;overflow-y: auto;overflow-x: hidden;
      ul {
        list-style: none;
        li {
          float: left;width: 32px;height: 32px;line-height: 32px;text-align: center;cursor: pointer;border-radius: 32px;
          @include ssapp();
          i {font-size: 18px;}
          &:hover {
            background: #f2f6ff
          }
        }
        &.app-color {
          &-a i {
            color: #42a5f5
          }
          &-b i {
            color: #66bb6a
          }
          &-c i {
            color: #ef5350
          }
          &-d i {
            color: #26a69a
          }
          &-e i {
            color: #9ccc65
          }
          &-f i {
            color: #ffa726
          }
          &-g i {
            color: #ec407a
          }
          &-h i {
            color: #29b6f6
          }
          &-i i {
            color: #5c6bc0
          }
          &-j i {
            color: #afaeb0
          }
          &-k i {
            color: #ff7043
          }
          &-l i {
            color: #ab47bc
          }
          &-m i {
            color: #26c6da
          }
          &-n i {
            color: #c4d330
          }
          &-o i {
            color: #ffca28
          }
          &-p i {
            color: #f2da04
          }
        }

      }
    }
  }
}
